<template>
  <div class="mod-user">
    <el-form :model="query" :inline="true" @keyup.enter.native="searchGrade()">
      <el-form-item>
        <el-select
          v-model="query.schoolType"
          filterable
          clearable
          @change="changeSchoolTypeForQuery"
          placeholder="请选择行业类型">
          <el-option
            v-for="item in schoolTypeList"
            :key="item.id"
            :label="item.value"
            :value="item.code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="success"
          icon="el-icon-search"
          v-if="hasPermission(['system:ent:list'])"
          @click="searchGrade()">查询
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="gradeInfoList"
      border

      v-loading="loading"
      style="width: 100%;">

      <el-table-column
        label="编号"
        type="index"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>

      <el-table-column
        align="center"
        label="企业名称">
        <template slot-scope="scope">
          <el-tag size="small">{{ scope.row.name }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="所属地区">
        <template slot-scope="scope">
          <el-tag size="small">{{ areaCodeDict[scope.row.areaCode] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="行业类型">
        <template slot-scope="scope">
          <el-tag size="small">{{ scope.row.industryId | getSchoolTypeName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        align="center"
        width="180"
        label="创建时间">
        <template slot-scope="scope">
          <el-tag size="small">{{ scope.row.createTime }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        align="center"
        width="180"
        label="审核状态">
        <template slot-scope="scope">
          <el-tag size="small">{{ auditStatusDict[scope.row.status] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="250"
        label="操作">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="warning"
            v-if="hasPermission(['system:ent:audit']) && scope.row.status === 1"
            @click="openAudit(scope.row)">审核
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="企业审核"
      :close-on-click-modal="false"
      :visible.sync="showFlag">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="企业名称:">
          <span>{{ form.name }}</span>
        </el-form-item>
        <el-form-item label="所属地区:">
          <span>{{ areaCodeDict[form.areaCode] }}</span>
        </el-form-item>
        <el-form-item label="行业类型:" placeholder="行业类型">
          <span>{{ form.industryId | getSchoolTypeName}}</span>
        </el-form-item>
        <el-form-item label="审核描述:" prop="desc">
          <textarea :rows="4" style="width: 100%" v-model="form.desc"></textarea>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showFlag = false">取消</el-button>
        <el-button type="danger" @click="audit(false)">审核不通过</el-button>
        <el-button type="primary" @click="audit(true)">审核通过</el-button>
      </span>
    </el-dialog>

    <el-pagination
      background
      @size-change="sizeChangeHandler"
      @current-change="currentChangeHandler"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      :total="totalCount"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>

<script>
let that = null
// eslint-disable-next-line import/first
import {auditStatusDict, getDictValueByType} from '@/api/dict'
// eslint-disable-next-line import/first
import {getAreaCodeList, getEnterpriseList} from '@/api/enterprise'

export default {
  name: 'enterpriseAudit',
  data () {
    return {
      auditStatusDict: auditStatusDict,
      studentList: [],
      currentPage: 1,
      pageSize: 10,
      totalCount: 0,
      satffFlag: false,
      loading: true,
      showFlag: false,
      schoolTypeList: [],
      areaCodeList: [],
      gradeInfoList: [],
      form: {
        id: null,
        areaCode: null,
        schoolType: null,
        name: '',
        desc: '',
        passed: true
      },
      query: {
        schoolType: '',
        name: ''
      },
      rules: {
        desc: [{max: 255, message: '不能超过255个字符', trigger: 'blur'}]
      }
    }
  },
  computed: {
    areaCodeDict () {
      const result = {}
      this.areaCodeList.forEach((row) => {
        result[row.code] = row.name
      })
      return result
    }
  },
  beforeCreate () {
    that = this
  },

  mounted () {
    getDictValueByType('industry_type').then(response => {
      this.schoolTypeList = response.data.data
    })
    this.getList()
  },

  methods: {

    getList () {
      let params = {
        pageNumber: this.currentPage,
        pageSize: this.pageSize,
        industryId: this.query.industryId,
        name: this.query.name,
        areaCode: this.query.areaCode,
        status: 1
      }
      getEnterpriseList(params).then(response => {
        this.loading = false
        this.gradeInfoList = response.data.data.dataList
        this.totalCount = response.data.data.total
      })

      getAreaCodeList().then(response => {
        this.areaCodeList = response.data
        console.log('areaCodeList: ', this.areaCodeList)
      })
    },

    searchGrade () {
      this.currentPage = 1
      this.loading = true
      this.getList()
    },

    changeSchoolTypeForQuery (val) {

    },

    // 选中阶段
    changeSchoolType (val) {

    },

    clearFormData () {
      this.form = {
        name: '',
        schoolType: ''
      }
    },

    deleteGradeInfo (enterprise) {
      this.$confirm('此操作将删除【' + enterprise.name + '】在系统中的所有数据,删除后不可恢复,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.delete(that.$http.httpUrl('/system/enterprise/' + enterprise.id))
          .then(response => {
            this.$message.success('删除成功')
            this.getList()
          })
      })
    },

    addGrade () {
      this.clearFormData()
      this.showFlag = true
    },

    handleSelectionChange (val) {

    },

    checkData (select) {
      console.log(select)
    },

    batchDelete () { // 批量删除

    },

    sizeChangeHandler (val) {
      this.pageSize = val
      this.currentPage = 1
      this.loading = true
      this.getList()
    },

    currentChangeHandler (val) {
      this.currentPage = val
      this.loading = true
      this.getList()
    },

    audit (passed) {
      this.form.passed = passed
      this.$confirm(`确定审核${passed ? '' : '不'}通过？, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.axios.post(this.$http.httpUrl('/system/enterprise/audit'), this.form)
              .then((response) => {
                this.showFlag = false
                if (response.data.code === 1) {
                  this.$message({
                    type: 'success',
                    message: '审核成功!'
                  })
                  this.clearFormData()
                  this.getList()
                }
              })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 注意 不能直接将item赋值给form
    openAudit (item) {
      this.form.id = item.id
      this.form.name = item.name
      this.form.areaCode = item.areaCode
      this.form.industryId = item.industryId
      this.showFlag = true
    }

  },

  filters: {

    getSchoolTypeName (val) {
      for (let i in that.schoolTypeList) {
        let item = that.schoolTypeList[i]
        if (item.code === val) {
          return item.value
        }
      }
      return '无'
    }
  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
